<template>
  <div class="banner">
    <div class="swiper-container">
      <div class="swiper-wrapper">

        <div class="swiper-slide" v-for="item in bannerList" :key="item.id">
          <img :src="item.picurl" alt="" @click="clickImg({id:item.id,cid:item.classid})">
        </div>

      </div>
      <div class="swiper-pagination"></div>
    </div>
  </div>
</template>

<script>
import { bnrAxios } from '@/network/indexAxios'
// eslint-disable-next-line import/no-duplicates
import Swiper from 'swiper'
import 'swiper/swiper-bundle.css'
// eslint-disable-next-line import/no-duplicates
import SwiperCore, { Pagination, Autoplay } from 'swiper/core'
SwiperCore.use([Pagination, Autoplay])

export default {
  data () {
    return {
      myswiper: null,
      bannerList: []
    }
  },
  async mounted () {
    await this.getBanner()
    this.initSwiper()
  },
  methods: {
    // 点击图片进入详情页
    clickImg (obj) {
      this.$router.push({ path: '/detail', query: obj })
    },
    // 获取banner数据
    async  getBanner () {
      await bnrAxios().then(res => {
        this.bannerList = res.data
      })
    },
    // 初始化swoper
    initSwiper () {
      this.myswiper = new Swiper('.banner .swiper-container', {
        loop: true,
        slidesPerView: 1.2,
        centeredSlides: true,
        pagination: {
          el: '.banner .swiper-pagination'
        },
        autoplay: {
          delay: 3000,
          disableOnInteraction: false
        }
      })
    }
  }
}
</script>

<style lang="less" scoped>
.banner{
  height: 5rem;
  margin-top: 0.2rem;
  .swiper-slide{
    img{
      width: 100%;
      height: 100%;
      transform: scale(0.9);
      transition: 0.5s;
      border-radius: .5rem;
      box-shadow: 0 0.08rem 0.12rem rgba(0, 0, 0, 0.3);
    }
    &.swiper-slide-active{
      img{
        transform: scale(1);
      }
    }
  }
  .swiper-container{
    --swiper-pagination-color: #00ff33;
  }
}
</style>
